<template>
	<view class="container b-f">

		<!-- 头部背景图 -->
		<view class="dealer-bg">
			<image style="z-index: 10;" mode="widthFix" :src="background"></image>
		</view>

		<view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
			<form @submit="formSubmit" report-submit="true" style="z-index: 20;">
				<!-- 提现佣金 -->
				<view class="widget widget__capital m-top20 b-f dis-flex flex-dir-column">
					<view class="capital__item dis-flex flex-x-between flex-y-center">
						<view class="item__left">{{ words.withdraw_apply.words.capital.value }}：</view>
						<view class="item__right c-violet">
							<text class="f-24">￥</text>
							<text class="f-34">{{ dealer.money }}</text>
						</view>
					</view>
					<view class="capital__item dis-flex flex-y-center">
						<view class="item__left">{{ words.withdraw_apply.words.money.value }}：</view>
						<view class="item__right flex-box">
							<input name="money" :placeholder=" words.withdraw_apply.words.money_placeholder.value " :value="name"></input>
						</view>
					</view>
				</view>
				<!-- 最低提现金额 -->
				<view class="capital__lowest m-top20 f-24 col-7 t-r">
					{{ words.withdraw_apply.words.min_money.value }}{{ settlement.min_money }}元
				</view>

				<!-- 提现方式 -->
				<view class="widget widget__form m-top20 b-f dis-flex flex-dir-column">
					<view class="form__title f-28">提现方式</view>
					<view class="form__box">
						<block v-for=" (item,index) in settlement.pay_type " :key="index">
							<block v-if=" item == 10 ">
								<!-- 微信支付 -->
								<view class="form__field dis-flex flex-y-center">
									<view class="form__radio dis-flex flex-y-center" @tap="toggleChecked" data-payment="10">
										<text class="radio__icon iconfont icon-radio" :class="[ payment == 10 ? 'c-violet' : 'col-bb' ]"></text>
										<text class="f-28">微信支付</text>
									</view>
								</view>
							</block>
							<block v-if=" item == 20 ">
								<!-- 支付宝 -->
								<view class="form__field dis-flex flex-y-center">
									<view class="form__radio dis-flex flex-y-center" @tap="toggleChecked" data-payment="20">
										<text class="radio__icon iconfont icon-radio" :class="[ payment == 20 ? 'c-violet' : 'col-bb' ]"></text>
										<text class="f-28">支付宝</text>
									</view>
								</view>
								<block v-if=" payment == 20 ">
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box">
											<input name="alipay_name" placeholder="请输入姓名"></input>
										</view>
									</view>
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box">
											<input name="alipay_account" placeholder="请输入支付宝账号"></input>
										</view>
									</view>
								</block>
							</block>
							<block v-if=" item == 30 ">
								<!-- 银行卡 -->
								<view class="form__field dis-flex flex-y-center">
									<view class="form__radio dis-flex flex-y-center" @tap="toggleChecked" data-payment="30">
										<text class="radio__icon iconfont icon-radio" :class="[ payment == 30 ? 'c-violet' : 'col-bb' ]"></text>
										<text class="f-28">银行卡</text>
									</view>
								</view>
								<block v-if=" payment == 30 ">
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box">
											<input name="bank_name" placeholder="请输入姓名" value=""></input>
										</view>
									</view>
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box">
											<input name="bank_account" placeholder="请输入开户行名称/地址" value=""></input>
										</view>
									</view>
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box">
											<input name="bank_card" placeholder="请输入银行卡号" value=""></input>
										</view>
									</view>
								</block>
							</block>
						</block>
					</view>
				</view>
				<!-- 提交申请 -->
				<view class="form-submit dis-flex flex-x-center" style="z-index: 999;">
					<button form-type="submit" :disabled="disabled">{{ words.withdraw_apply.words.submit.value }}</button>
					</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isData: false,
				background: '',
				dealer: {},
				words: {
					withdraw_apply: {
						words: {
							capital: {
								value: ''
							},
							min_money: {
								value: ''
							},
							money: {
								value: ''
							},
							money_placeholder: {
								value: ''
							},
							submit: {
								value: ''
							},
						}
					}
				},
				settlement: '',
				payment: 20,
				name: '',
				disabled: false,

			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取分销商提现信息
			this.getDealerWithdraw();
		},

		methods: {

			/**
			 * 获取分销商提现信息
			 */
			getDealerWithdraw: function() {
				let _this = this;
				_this._get('user.dealer/withdraw', {}, function(result) {
					let data = result.data;
					data.isData = true;
					// console.log(result.data);
					// 设置当前页面标题
					uni.setNavigationBarTitle({
						title: data.words.withdraw_apply.title.value
					});
					//  默认提现方式
					data['payment'] = data.settlement.pay_type[0];
					_this.setData(data);

				});
			},

			/**
			 * 提交申请 
			 */
			formSubmit: function(e) {
				
				let _this = this,
					values = e.detail.value,
					words = _this.words.withdraw_apply.words;

				// console.log(words);

				// 记录formId
				_this.saveFormId(e.detail.formId);

				// 验证可提现佣金
				if (_this.dealer.money <= 0) {
					_this.showError('当前没有' + words.capital.value);
					return false;
				}
				// 验证提现金额
				if (!values.money || values.money.length < 1) {
					_this.showError('请填写' + words.money.value);
					return false;
				}
				// 按钮禁用
				_this.setData({
					disabled: true
				});
				// 提现方式
				values['pay_type'] = _this.payment;
				// 数据提交
				_this._post_form('user.dealer.withdraw/submit', {
					data: JSON.stringify(values)
				}, function(result) {
					// 提交成功
					// console.log(result);
					_this.showError(result.msg, function() {
						uni.navigateTo({
							url: '../list/list',
						})
					});
				}, null, function() {
					// 解除按钮禁用
					_this.setData({
						disabled: false
					});
				});
			},

			/**
			 * 切换提现方式
			 */
			toggleChecked: function(e) {
				this.setData({
					payment: e.currentTarget.dataset.payment
				});
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.c-violet {
		color: #786cff;
	}

	.col-bb {
		color: #bbb;
	}

	.dealer-bg image {
		width: 100%;
	}

	.widget-body .widget {
		width: 700rpx;
		box-sizing: border-box;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
		border-radius: 12rpx;
	}

	/* 提现金额 */

	.widget__capital {
		padding: 10rpx 0;
		margin-top: -60rpx;
	}

	.widget__capital .capital__item {
		height: 80rpx;
		padding: 10rpx 35rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e7e7e7;
		box-sizing: border-box;
	}

	.widget__capital .capital__item:last-child {
		border-bottom: none;
	}

	.widget__capital .capital__item .item__left {
		margin-right: 20rpx;
	}

	.capital__lowest {
		width: 700rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	/* 提现方式 */

	.widget__form {
		padding: 10rpx 0 20rpx 0;
	}

	.widget__form .form__title {
		padding: 16rpx 35rpx;
		border-bottom: 1rpx solid #e7e7e7;
	}

	.widget__form .form__box {
		padding: 20rpx 35rpx;
	}

	.widget__form .form__field {
		height: 80rpx;
		padding: 0;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.widget__form .form__field .radio__icon {
		font-size: 38rpx;
		margin-right: 12rpx;
	}

	.widget__form .form__field .field-input input {
		background-color: #f9f9f9;
		height: 70rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	/* 提交申请 */

	.form-submit {
		margin-top: 40rpx;
	}

	.form-submit button {
		font-size: 30rpx;
		background: #786cff;
		border: 1rpx solid #786cff;
		color: white;
		border-radius: 50rpx;
		padding: 0 120rpx;
	}

	.form-submit button[disabled] {
		background: #8e84fc;
		border-color: #8e84fc;
		color: white;
	}
</style>
